<script setup>
import Back from '@/assets/img/back.png'
import Complete from '@/assets/img/complete.png'
import MyDelete from '@/assets/img/delete.png'
import Edit from '@/assets/img/edit.png'
import Rili from '@/assets/img/rili.png'
import Search from '@/assets/img/search.png'
import { useRouter } from 'vue-router'
const router = useRouter();
import { defineEmits } from 'vue'
const emit = defineEmits(['goback', 'save', 'addRc', 'deleteRc'])
const props = defineProps({
  isBack: {
    type: Boolean,
    default: false,
  },
  name: {
    type: String,
    default: '',
  },
  myTitle: {
    type: String,
    default: '',
  },
  isSearch: {
    type: Boolean,
    default: false,
  },
  isDelete: {
    type: Boolean,
    default: false,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  isRili: {
    type: Boolean,
    default: false,
  },
  isComplete: {
    type: Boolean,
    default: false,
  },
  userId: {
    type: String,
    default: '',
  }
})
const goback = () => {
  // emit('goback');
  router.go(-1)
}
const save = () => {
  emit('save');
}
const rili = () => {
  router.push({
    path: '/rcap',
    query: {
      userId: props.userId
    }
  })
}
const addRc = () => {
  emit('addRc');
}
const deleteRc = () => {
  emit('deleteRc');
}
const search = () => {
  localStorage.setItem('title', '');
  localStorage.setItem('list', JSON.stringify([]));
  router.push({
    path: '/search',
    query: {
      userId: props.userId
    }
  })
}
</script>
<template>
  <div class="header">
    <div class="left">
      <div v-if="!isBack">{{ name }}</div>
      <img v-if="isBack" :src="Back" @click="goback" />
    </div>
    <div class="middle" v-if="isBack">{{ myTitle }}</div>
    <div class="right">
      <img v-if="isSearch" :src="Search" @click="search" />
      <img v-if="isDelete" :src="MyDelete" @click="deleteRc" />
      <img v-if="isEdit" :src="Edit" @click="addRc" />
      <img v-if="isRili" :src="Rili" @click="rili" />
      <img v-if="isComplete" :src="Complete" @click="save" />
    </div>
  </div>
</template>
<style scoped>
.header {
  background-color: #166AE7;
  color: #fff;
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;

  .left {
    display: flex;
    height: 100%;
    align-items: center;
    padding-left: 20px;

    div {
      background: transparent;
      font-size: 20px;
    }

    img {
      width: 24px;
      height: 18px;
    }
  }

  .middle {
    height: 100%;
    background: transparent;
    width: fit-content;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-size: 20px;
    display: flex;
    align-items: center;
  }

  .right {
    display: flex;
    align-items: center;
    padding-right: 14px;
    height: 100%;
    gap: 16px;

    img {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
